<template>
  <div class="home-container" v-if="isPageReady">
    <!-- 顶部欢迎区域 -->
    <div class="hero-section">
      <div class="hero-content animate-fade-in-up">
        <h1 class="title">智能文件管理系统</h1>
        <p class="subtitle">让文件管理更简单，协作更高效</p>
        <div class="hero-buttons">
          <el-button type="primary" size="large" @click="goToFiles" class="btn-hover-scale">开始使用</el-button>
        </div>
      </div>
      <div class="hero-image animate-fade-in-up" style="animation-delay: 0.3s">
        <img src="@/assets/file-management.svg" alt="文件管理插图" class="img-scale-hover" />
      </div>
    </div>

    <!-- 特性展示区域 -->
    <div class="features-section">
      <h2 class="section-title animate-fade-in">核心功能</h2>
      <div class="feature-grid">
        <div class="feature-item animate-fade-in-up" style="animation-delay: 0.1s">
          <el-icon class="feature-icon icon-pulse"><Upload /></el-icon>
          <h3>文件上传</h3>
          <p>支持拖拽上传、批量上传，轻松管理各类文件</p>
        </div>
        <div class="feature-item animate-fade-in-up" style="animation-delay: 0.2s">
          <el-icon class="feature-icon icon-pulse"><Share /></el-icon>
          <h3>文件分享</h3>
          <p>一键分享，支持加密分享和访问权限控制</p>
        </div>
        <div class="feature-item animate-fade-in-up" style="animation-delay: 0.3s">
          <el-icon class="feature-icon icon-pulse"><Lock /></el-icon>
          <h3>安全存储</h3>
          <p>企业级加密技术，确保数据安全</p>
        </div>
        <div class="feature-item animate-fade-in-up" style="animation-delay: 0.4s">
          <el-icon class="feature-icon icon-pulse"><Cpu /></el-icon>
          <h3>AI 赋能</h3>
          <p>智能文件分类、内容识别，让管理更高效</p>
        </div>
      </div>
    </div>

    <!-- 统计数据展示 -->
    <div class="stats-section">
      <div class="stat-item animate-fade-in-up" style="animation-delay: 0.1s">
        <div class="stat-number count-up">100万+</div>
        <div class="stat-label">活跃用户</div>
      </div>
      <div class="stat-item animate-fade-in-up" style="animation-delay: 0.2s">
        <div class="stat-number count-up">99.9%</div>
        <div class="stat-label">服务可用性</div>
      </div>
      <div class="stat-item animate-fade-in-up" style="animation-delay: 0.3s">
        <div class="stat-number count-up">50PB+</div>
        <div class="stat-label">数据存储</div>
      </div>
    </div>

    <!-- 用户评价区域 -->
    <div class="testimonials-section">
      <h2 class="section-title animate-fade-in">用户评价</h2>
      <div class="testimonial-grid">
        <div class="testimonial-item animate-fade-in-up" style="animation-delay: 0.1s">
          <div class="testimonial-content">
            <p>"使用这个文件管理系统后，我们团队的协作效率提升了30%，文件查找和分享变得无比轻松。"</p>
          </div>
          <div class="testimonial-author">
            <img 
              :src="userAvatars[0]" 
              alt="张三的头像" 
              class="author-avatar"
              @error="handleAvatarError(0)"
            />
            <div class="author-info">
              <h4>张三</h4>
              <p>产品经理 @ 某科技公司</p>
            </div>
          </div>
        </div>
        <div class="testimonial-item animate-fade-in-up" style="animation-delay: 0.2s">
          <div class="testimonial-content">
            <p>"AI 分类功能太强大了，省去了我们大量手动整理文件的时间，数据安全也很有保障。"</p>
          </div>
          <div class="testimonial-author">
            <img 
              :src="userAvatars[1]" 
              alt="李四的头像" 
              class="author-avatar"
              @error="handleAvatarError(1)"
            />
            <div class="author-info">
              <h4>李四</h4>
              <p>设计师 @ 创意工作室</p>
            </div>
          </div>
        </div>
        <div class="testimonial-item animate-fade-in-up" style="animation-delay: 0.3s">
          <div class="testimonial-content">
            <p>"多终端同步和便捷的分享功能，让我在不同设备间工作无缝衔接，强烈推荐！"</p>
          </div>
          <div class="testimonial-author">
            <img 
              :src="userAvatars[2]" 
              alt="王五的头像" 
              class="author-avatar"
              @error="handleAvatarError(2)"
            />
            <div class="author-info">
              <h4>王五</h4>
              <p>自由开发者</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 行动号召区域 -->
    <div class="cta-section animate-fade-in-up">
      <h2>准备好提升你的文件管理效率了吗？</h2>
      <p>立即注册，享受 14 天免费高级版体验</p>
      <el-button type="primary" size="large" @click="goToRegister" class="btn-hover-scale">免费注册</el-button>
    </div>

    <!-- 页脚区域 -->
    <footer class="footer-section">
      <div class="footer-content">
        <div class="footer-logo">
          <h3>智能文件管理系统</h3>
          <p>让文件管理更简单，协作更高效</p>
        </div>
        <div class="footer-links">
          <h4>快速链接</h4>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">功能</a></li>
            <li><a href="#">价格</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">关于我们</a></li>
          </ul>
        </div>
        <div class="footer-contact">
          <h4>联系我们</h4>
          <p>邮箱：support@example.com</p>
          <p>电话：400-123-4567</p>
          <div class="social-icons">
            <a href="#"><i class="icon-weibo"></i></a>
            <a href="#"><i class="icon-wechat"></i></a>
            <a href="#"><i class="icon-github"></i></a>
            <a href="#"><i class="icon-twitter"></i></a>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <p>© 2023 智能文件管理系统. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>
typescript
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Upload, Share, Lock, Cpu } from "@element-plus/icons-vue";
import { useLoginUserStore } from "@/store/user";

export default defineComponent({
  name: "HomeView",
  components: { Upload, Share, Lock, Cpu },
  setup() {
    const router = useRouter();
    const goToFiles = () => router.push("/file");
    const goToRegister = () => router.push("/register");
    const userAvatars = ref<string[]>([]);
    const defaultAvatars = [
      "https://picsum.photos/200/200?random=1",
      "https://picsum.photos/200/200?random=2",
      "https://picsum.photos/200/200?random=3"
    ];
    const isPageReady = ref(false);

    // 预设游客账号信息
    const guestAccount = {
      phone: "13824122946",
      password: "123456789"
    };

    // 从本地存储获取数据
    const getLocalStorageItem = (key: string): string | null => {
      if (typeof window === "undefined" || !window.localStorage) {
        return null;
      }
      try {
        return window.localStorage.getItem(key);
      } catch (e) {
        console.error("读取本地存储失败:", e);
        return null;
      }
    };

    // 解析URL参数并存储到localStorage
    const parseAndStoreUrlParams = () => {
      const urlParams = new URLSearchParams(window.location.search);
      urlParams.forEach((value, key) => {
        const decodedValue = decodeURIComponent(value);
        localStorage.setItem(key, decodedValue);
      });
    };

    // 初始化用户头像
    const initAvatars = () => {
      const storedHeadImg = getLocalStorageItem("headImg");
      userAvatars.value = storedHeadImg ? [storedHeadImg, storedHeadImg, storedHeadImg] : [...defaultAvatars];
    };

    // 头像加载失败处理
    const handleAvatarError = (index: number) => {
      userAvatars.value[index] = defaultAvatars[index];
    };

    // 数字滚动动画
    const initCountUp = () => {
      const countElements = document.querySelectorAll<HTMLDivElement>(".count-up");
      countElements.forEach(el => {
        const target = el.textContent || "";
        const num = parseFloat(target.replace(/[^\d.]/g, ""));
        const unit = target.replace(/[\d.]/g, "");
        let current = 0;
        const step = num / 50;
        const timer = setInterval(() => {
          current += step;
          if (current >= num) {
            clearInterval(timer);
            el.textContent = target;
          } else {
            el.textContent = `${Math.floor(current)}${unit}`;
          }
        }, 30);
      });
    };

    // 自动登录逻辑（新增游客账号兜底）
    const autoLogin = async () => {
      // 1. 确保URL参数已存储到本地
      parseAndStoreUrlParams();
      
      // 2. 优先读取本地存储，无数据则使用游客账号
      const storedPhone = getLocalStorageItem("phone");
      const storedPassword = getLocalStorageItem("password");
      const loginPhone = storedPhone || guestAccount.phone;
      const loginPassword = storedPassword || guestAccount.password;

      // 3. 执行登录（无论本地存储有无数据，均使用上述获取到的账号）
      const loginUserStore = useLoginUserStore();
      try {
        await loginUserStore.login({ phone: loginPhone, password: loginPassword });
        console.log("自动登录成功（本地账号/游客账号）");
      } catch (error) {
        console.log("自动登录失败，将继续显示页面");
      }
      
      // 4. 初始化页面内容并渲染
      initAvatars();
      initCountUp();
      isPageReady.value = true;
    };

    // 执行流程：先处理参数，再登录，最后渲染
    onMounted(() => {
      autoLogin();
    });

    return { 
      goToFiles, 
      goToRegister, 
      userAvatars, 
      handleAvatarError,
      isPageReady
    };
  },
});
</script>

<style scoped>
.home-container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

.hero-section { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin: 60px 0; 
  gap: 40px; 
}

.hero-content, .hero-image { 
  flex: 1; 
}

.hero-image { 
  display: flex; 
  justify-content: center; 
}

.hero-image img { 
  max-width: 55%; 
  height: auto; 
}

.title { 
  font-size: 3em; 
  color: #2c3e50; 
  margin: 0 0 20px; 
  line-height: 1.2; 
}

.subtitle { 
  font-size: 1.5em; 
  color: #666; 
  margin: 0 0 30px; 
}

.hero-buttons { 
  display: flex; 
  gap: 20px; 
}

.features-section { 
  margin: 80px 0; 
}

.section-title { 
  text-align: center; 
  font-size: 2em; 
  color: #2c3e50; 
  margin: 0 0 40px; 
}

.feature-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 30px; 
}

.feature-item { 
  background: #fff; 
  padding: 30px; 
  border-radius: 10px; 
  text-align: center; 
  transition: all 0.3s ease; 
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); 
}

.feature-item h3 { 
  font-size: 1.3em; 
  color: #2c3e50; 
  margin: 0 0 10px; 
}

.feature-item p { 
  color: #666; 
  line-height: 1.6; 
  margin: 0; 
}

.stats-section { 
  display: flex; 
  justify-content: space-around; 
  padding: 60px 0; 
  background: #f8f9fa; 
  border-radius: 10px; 
  margin: 80px 0 40px; 
}

.stat-item { 
  text-align: center; 
  padding: 0 20px; 
}

.stat-number { 
  font-size: 2.5em; 
  font-weight: bold; 
  color: #409eff; 
  margin: 0 0 10px; 
}

.stat-label { 
  color: #666; 
  font-size: 1.1em; 
  margin: 0; 
}

.testimonials-section { 
  margin: 80px 0; 
}

.testimonial-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
}

.testimonial-item { 
  background: #fff; 
  padding: 30px; 
  border-radius: 10px; 
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); 
}

.testimonial-content { 
  margin-bottom: 20px; 
}

.testimonial-content p { 
  color: #666; 
  line-height: 1.6; 
  font-style: italic; 
}

.testimonial-author { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}

.author-avatar { 
  width: 50px; 
  height: 50px; 
  border-radius: 50%; 
  object-fit: cover; 
}

.author-info h4 { 
  font-size: 1em; 
  color: #2c3e50; 
  margin: 0 0 4px; 
}

.author-info p { 
  font-size: 0.9em; 
  color: #999; 
  margin: 0; 
}

.cta-section { 
  text-align: center; 
  padding: 80px 0; 
  background: linear-gradient(135deg, #f0f2f5 0%, #e6ebf1 100%); 
  border-radius: 10px; 
  margin: 80px 0; 
}

.cta-section h2 { 
  font-size: 2em; 
  color: #2c3e50; 
  margin: 0 0 16px; 
}

.cta-section p { 
  font-size: 1.2em; 
  color: #666; 
  margin: 0 0 30px; 
}

.footer-section { 
  background: #2c3e50; 
  color: #fff; 
  padding: 60px 0 20px; 
}

.footer-content { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 40px; 
  margin-bottom: 40px; 
}

.footer-logo h3 { 
  font-size: 1.8em; 
  margin: 0 0 12px; 
}

.footer-logo p { 
  color: #ddd; 
  line-height: 1.6; 
}

.footer-links h4, .footer-contact h4 { 
  font-size: 1.2em; 
  margin: 0 0 20px; 
}

.footer-links ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.footer-links li { 
  margin-bottom: 10px; 
}

.footer-links a { 
  color: #ddd; 
  text-decoration: none; 
  transition: color 0.3s ease; 
}

.footer-links a:hover { 
  color: #fff; 
}

.footer-contact p { 
  color: #ddd; 
  margin: 0 0 10px; 
}

.social-icons { 
  display: flex; 
  gap: 12px; 
  margin-top: 20px; 
}

.social-icons a { 
  color: #ddd; 
  font-size: 1.5em; 
  transition: color 0.3s ease; 
}

.social-icons a:hover { 
  color: #fff; 
}

.footer-copyright { 
  text-align: center; 
  color: #aaa; 
  padding-top: 20px; 
  border-top: 1px solid #444; 
}

.feature-icon { 
  font-size: 2.5em; 
  color: #409eff; 
  margin: 0 0 20px; 
}

.animate-fade-in { 
  animation: fadeIn 0.8s ease forwards; 
  opacity: 0; 
}

.animate-fade-in-up { 
  animation: fadeInUp 0.8s ease forwards; 
  opacity: 0; 
  transform: translateY(20px); 
}

.icon-pulse { 
  animation: pulse 2s infinite; 
}

.img-scale-hover { 
  transition: transform 0.3s ease; 
}

.img-scale-hover:hover { 
  transform: scale(1.05); 
}

.btn-hover-scale { 
  transition: transform 0.2s ease; 
}

.btn-hover-scale:hover { 
  transform: scale(1.05); 
}

@keyframes fadeIn { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}

@keyframes fadeInUp { 
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  } 
  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}

@keyframes pulse { 
  0%, 100% { transform: scale(1); } 
  50% { transform: scale(1.1); } 
}

/* 响应式适配 - 平板（769px-968px） */
@media (max-width: 968px) {
  .hero-section { 
    flex-direction: column; 
    text-align: center; 
    margin: 40px 0; 
  }
  .feature-grid, .testimonial-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px; 
  }
  .hero-buttons { 
    justify-content: center; 
  }
  .title { 
    font-size: 2.5em; 
  }
  .stat-number { 
    font-size: 2.2em; 
  }
  .cta-section h2 { 
    font-size: 1.8em; 
  }
  .footer-content { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
  }
}

/* 响应式适配 - 手机（≤768px） */
@media (max-width: 768px) {
  .feature-grid, .testimonial-grid, .footer-content { 
    grid-template-columns: 1fr; 
    gap: 20px; 
  }
  .stats-section { 
    flex-direction: column; 
    gap: 30px; 
    padding: 40px 0; 
  }
  .title { 
    font-size: 2em; 
  }
  .subtitle { 
    font-size: 1.2em; 
    margin-bottom: 25px; 
  }
  .stat-number { 
    font-size: 2em; 
  }
  .feature-item, .testimonial-item { 
    padding: 25px 20px; 
  }
  .features-section, .stats-section, .testimonials-section, .cta-section { 
    margin: 60px 0 20px; 
  }
  .cta-section { 
    padding: 60px 20px; 
  }
  .cta-section p { 
    font-size: 1.1em; 
  }
  .footer-logo h3 { 
    font-size: 1.5em; 
  }
  .footer-content { 
    margin-bottom: 30px; 
  }
  .footer-copyright { 
    font-size: 0.9em; 
  }
}

/* 响应式适配 - 小屏手机（≤375px） */
@media (max-width: 375px) {
  .hero-section { 
    gap: 20px; 
    margin: 30px 0; 
  }
  .hero-image img { 
    max-width: 80%; 
  }
  .section-title { 
    font-size: 1.6em; 
    margin-bottom: 30px; 
  }
  .cta-section h2 { 
    font-size: 1.5em; 
  }
  .btn-hover-scale { 
    padding: 12px 20px !important; 
    font-size: 14px !important; 
  }
}
</style>
